<!--
 * @Author: XY
 * @Date: 2023-11-10 11:01:29
 * @LastEditors: XY
 * @LastEditTime: 2023-11-30 15:19:01
 * @FilePath: \friendsApp\see_you\src\views\homePage\userDetail.vue
 -->


 <template>
  <div class="box">
    <div class="banner">
      <van-swipe :autoplay="3000" height="375">
        <van-swipe-item v-for="(image, index) in dataInfo.albums" :key="index">
          <img
            style="object-fit: cover; width: 100%; height: 100%"
            :src="image"
            @click.stop="onPreviewPicture(dataInfo.albums)"
          />
        </van-swipe-item>
      </van-swipe>
      <div class="banner-info">
        <span class="banner-info-left">
          <div>
            {{ dataInfo.avatar_status == 1 ? '真人照片｜' : ''
            }}{{ dataInfo.is_authentication == 1 ? '实名认证｜' : '' }}
          </div>
          <div>{{ dataInfo.is_merchant == 1 ? '微信审核' : '' }}</div>
        </span>
        <span class="banner-info-right">
          <div>喜欢ta</div>
          <div>{{ dataInfo.fans }}人</div>
        </span>
      </div>
    </div>
    <div class="list-info-message">
      <div class="list-info-message-line1">
        <div class="list-info-message-line1-name">{{ dataInfo.nickname }}</div>
        <div class="list-info-message-line1-age" v-if="dataInfo.sex == 2">
          <img src="@/assets/iconIndex/girl.png" />{{ dataInfo.age }}
        </div>
        <div
          class="list-info-message-line1-age"
          v-if="dataInfo.sex == 1"
          style="background: #cde1fd; color: #3662ec"
        >
          <img src="@/assets/iconIndex/boy.png" />{{ dataInfo.age }}
        </div>

        <div class="list-info-message-line1-vip" v-if="dataInfo.is_svip == 1">
          <img src="@/assets/iconIndex/vip.png" alt="" />
        </div>
        <p class="list-info-message-line1-status">{{ dataInfo.distance }}</p>
      </div>
      <div class="list-info-message-line2">
        <div class="list-info-message-line2-describe">
          {{ dataInfo.contents
          }}{{ dataInfo.occupation ? ' |' + dataInfo.occupation : '' }}
        </div>
        <div class="list-info-message-line2-distance">
          {{ dataInfo.distance }}
        </div>
      </div>
      <div class="list-info-message-line4">
        <div class="list-info-message-line4-hobby">
          <div class="list-info-message-line4-hobby-line"></div>
          兴趣爱好
        </div>
        <div
          class="list-info-message-line4-tags"
          v-if="dataInfo.labels.interest_label"
        >
          <div
            v-for="(itemInterest, index) in dataInfo.labels.interest_label"
            :key="index"
          >
            {{ itemInterest }}
          </div>
        </div>
      </div>

      <div
        class="list-info-message-line5"
        v-if="$store.state.userInfo.is_merchant == 1"
      >
        <div class="list-info-message-line5-sport">
          <div class="list-info-message-line5-sport-line"></div>
          印象评价
          <div
            class="list-info-message-line5-sport-btn"
            v-if="$store.state.userInfo.is_merchant == 1"
            @click="addImpress"
          >
            <van-icon name="plus" size="12" />
            <div>添加印象</div>
          </div>
        </div>
        <div class="list-info-message-line5-tags">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="initReplyList"
          >
            <div
              class="plate-review-box"
              v-for="itemImpress in impressList"
              :key="itemImpress.id"
            >
              <span v-if="impressList.length > 0">
                <div class="plate-review-box-headImg">
                  <img :src="itemImpress.merchant.avatar" alt="" />
                </div>
                <div class="plate-review-box-info">
                  <div class="plate-review-box-info-name">
                    {{ itemImpress.merchant.nickname }}
                  </div>
                  <div class="plate-review-box-info-serve">
                    <div class="plate-review-box-info-serve-tags">
                      <p
                        v-for="itempicture in itemImpress.picture_label"
                        :key="itempicture"
                      >
                        {{ itempicture }}
                      </p>
                    </div>
                  </div>
                  <div class="plate-review-box-info-time">
                    {{ itemImpress.add_time }}
                  </div>
                </div>
              </span>
            </div>
          </van-list>
        </div>
      </div>
    </div>

    <!-- 添加印象 -->
    <addLabel
      @closeLabelViewPop="closeLabelViewPop"
      :showLabelViewPop="showLabelViewPop"
      :type="type"
    ></addLabel>
  </div>
</template>

<script>
import addLabel from '@/components/addLabel.vue'
import { Dialog } from 'vant'
import { getEnterReply, getUserInfo, addEnterReply } from '@/api/index'
import { parseTime } from '@/utils/fun'
import { ImagePreview } from 'vant'

import { Toast } from 'vant'
export default {
  name: 'HomeView',
  components: {
    addLabel,
  },
  data() {
    return {
      type: 'picture',
      loading: false,
      finished: false,
      impressList: [],
      dataInfo: {
        labels: {
          interest_label: [],
        },
      },
      // 主页接口参数
      userParams: {
        id: '1850',
        lng: '100.12', //经度
        lat: '103.12', //纬度
      },
      // 印象列表接口参数
      replyParams: {
        limit: 10,
        uid: 'string',
        page: 1,
      },
      showLabelViewPop: false,
    }
  },
  mounted() {
    if (this.$route.query.id) {
      // 判断是从列表中进来的
      this.userParams.id = this.$route.query.id
      this.replyParams.uid = this.$route.query.id
      this.userParams.lng = this.$store.state.lng
      this.userParams.lat = this.$store.state.lat
    } else {
      console.log('?')
      // 判断是个人主页进来的
      this.userParams.id = this.$store.state.userInfo.uid
      this.replyParams.uid = this.$store.state.userInfo.uid
      this.userParams.lng = this.$store.state.lng
      this.userParams.lat = this.$store.state.lat
    }
    this.initUserInfo()
  },
  methods: {
    onPreviewPicture(albums) {
      ImagePreview({
        images: [...albums],
      })
    },
    // 关闭印象标签弹窗
    closeLabelViewPop(parmas) {
      console.log(parmas)
      if (parmas.data.length > 0) {
        Dialog.confirm({
          title: '添加印象',
          message: '确认添加印象',
          confirmButtonColor: '#3296fa',
        })
          .then(() => {
            let datas = {
              picture_label: [],
              uid: this.$route.query.id,
            }
            datas.picture_label = parmas.data.map((item) => {
              return item.id
            })
            console.log(datas)
            addEnterReply(datas).then((res) => {
              if (res.status == 200) {
                Toast('添加成功')
                this.impressList = []
                this.replyParams.page = 1
                this.initReplyList()
              }
              this.showLabelViewPop = false
            })
            // on confirm
          })
          .catch(() => {
            this.showLabelViewPop = false
          })
      } else {
        if (parmas.isCancel) {
          this.showLabelViewPop = false
        } else {
          Toast('请选择印象标签')
        }
      }
    },
    // 添加印象
    addImpress() {
      this.showLabelViewPop = true
    },
    //初始化印象评论列表
    initReplyList() {
      getEnterReply(this.replyParams)
        .then((res) => {
          console.log(res.data)
          if (res.data.count == 0 || res.data.count > this.impressList.length) {
            res.data.list.forEach((element) => {
              element.add_time = parseTime(element.add_time)
            })
            this.replyParams.page++
            this.impressList = this.impressList.concat(...res.data.list)
          }
          this.loading = false
          if (res.data.count <= this.impressList.length) {
            this.finished = true
          }
          this.$forceUpdate()
          //
        })
        .catch((err) => {
          // this.finished = true
          // this.loading = false
        })
    },
    // 传递用户id 经纬度 获取主页信息
    initUserInfo() {
      getUserInfo(this.userParams)
        .then((res) => {
          if (res.status == 200) {
            res.data.contents = ''

            res.data.contents +=
              res.data.height +
              'cm | ' +
              res.data.weight +
              'kg | ' +
              res.data.constellation

            this.dataInfo = res.data
            console.log(this.dataInfo)
          }
        })
        .catch((err) => {})
    },
  },
}
</script>

<style  lang="scss" scoped>
.line {
  height: 1px;
  background: #d8d8d8;
}
.box {
}
.banner {
  &-info {
    background: rgba(207, 254, 238, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: #00b578;
    padding: 8px 15px;
    &-left {
      display: flex;
      > div:nth-last-of-type(1) {
        font-size: 12px;
        font-weight: 500;
        color: #767676;
      }
    }
    &-right {
      display: flex;
      > div:nth-of-type(1) {
        margin-right: 5px;
      }
    }
  }
}
.list-info-message {
  padding: 15px;
  flex: 1;
  &-line1 {
    display: flex;
    align-items: center;
    position: relative;
    > div {
      margin-right: 8px;
    }

    &-name {
      font-size: 16px;
      font-weight: 500;
      color: #1a1a1a;
    }
    &-age {
      width: 38px;
      height: 16px;
      background: #fcdbdb;
      border-radius: 8px;
      color: #fa5151;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        margin-right: 2px;
      }
    }
    &-vip {
      display: flex;
      align-items: center;
    }
    &-status {
      position: absolute;
      right: 0;
      font-size: 12px;
      font-weight: 400;
      color: #ff8f1f;
    }
  }
  &-line2 {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #767676;
    line-height: 12px;
    padding: 8px 0;
    margin-bottom: 15px;
    &-describe {
    }
    &-distance {
    }
  }
  &-line4 {
    align-items: flex-start;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 400;
    color: #1a1a1a;
    &-hobby {
      display: flex;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      color: #000000;
      margin-bottom: 8px;
      &-line {
        width: 2px;
        background: #1a1a1a;
        margin: 2px 10px 2px 0px;
      }
    }
    &-tags {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      > div {
        margin-right: 8px;
        margin-bottom: 20px;
        padding: 4px 7px;
        background: #ffe5cc;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 400;
        color: #ff8f1f;
        text-align: center;
      }
    }
  }
  &-line5 {
    margin-bottom: 16px;
    margin-right: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #1a1a1a;
    &-sport {
      display: flex;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      color: #000000;
      margin-bottom: 8px;
      position: relative;
      &-line {
        width: 2px;
        background: #1a1a1a;
        margin: 2px 10px 2px 0px;
      }
      &-btn {
        position: absolute;
        right: 0;
        padding: 4px 7px;
        background: #eeeeee;
        border-radius: 8px;
        border: 1px solid #767676;
        font-size: 12px;
        font-weight: 400;
        color: #767676;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    &-tags {
      > div {
        margin-right: 8px;
        margin-bottom: 20px;
        padding: 4px 7px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 400;
        color: #767676;
        text-align: center;
      }
    }
    .plate-review-box {
      display: flex;
      &-headImg {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: pink;
        margin-right: 7px;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
      &-info {
        &-name {
          font-size: 14px;
          font-weight: 500;
          color: #1a1a1a;
          line-height: 24x;
          text-align: left;
          margin-bottom: 8px;
        }

        &-serve {
          display: flex;
          align-items: center;
          font-size: 12px;
          font-weight: 400;
          color: #767676;
          line-height: 12px;
          &-tags {
            display: flex;
            flex-wrap: wrap;
            p {
              margin-right: 8px;
              margin-bottom: 8px;
              padding: 2px 7px;
              border-radius: 8px;
              border-radius: 8px;
              border: 1px solid #767676;
            }
          }
        }
        &-time {
          color: #aaaaaa;
          font-size: 10px;
          padding-top: 10px;
          text-align: left;
          margin-bottom: 20px;
        }
      }
    }
  }
}

.discuss {
  margin: 16px auto;
  width: 147px;
  height: 32px;
  background: #cde1fd;
  border-radius: 8px;
  border: 1px solid #3662ec;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3662ec;
}
</style>


